<nav class="navbar djlint-nav is-white is-fixed-top"
     aria-label="main navigation">
    <div class="container">
        <div class="navbar-brand">
            <a href="{{ "lang_code_url" | i18n }}/">{% image "./src/static/img/icon.png", "djlint icon", "(min-width:600px) 50vw, 100vw" %}</a>
            <a role="button"
               class="navbar-burger"
               aria-label="menu"
               aria-expanded="false"
               data-target="djlint-nav-menu">
                <span aria-hidden="true"></span>
                <span aria-hidden="true"></span>
                <span aria-hidden="true"></span>
            </a>
        </div>
        <div id="djlint-nav-menu" class="navbar-menu">
            <div class="navbar-start my-5 mx-0 is-justify-content-center is-flex-grow-1">
                <a class="navbar-item has-text-grey-dark" href="{{ "lang_code_url" | i18n }}/docs/getting-started/">
                    {{ "getting_started" | i18n }}
                </a>

                <a class="navbar-item has-text-grey-dark" href="{{ "lang_code_url" | i18n }}/docs/formatter/">
                    {{ "formatter" | i18n }}
                </a>
                <a class="navbar-item has-text-grey-dark" href="{{ "lang_code_url" | i18n }}/docs/linter/">
                    {{ "linter" | i18n }}
                </a>
                <a class="navbar-item has-text-grey-dark" href="{{ "lang_code_url" | i18n }}/docs/configuration">
                    {{ "configuration" | i18n }}
                </a>
                <a class="navbar-item has-text-grey-dark" href="{{ "lang_code_url" | i18n }}/docs/integrations">
                    {{ "integrations" | i18n }}
                </a>
                <a class="navbar-item has-text-grey-dark" href="{{ "lang_code_url" | i18n }}/docs/best-practices">
                    {{ "best_practices" | i18n }}
                </a>
                <a class="navbar-item has-text-grey-dark" href="{{ "lang_code_url" | i18n }}/demo">
                    {{ "try_online" | i18n }}
                </a>
            </div>
            <div class="navbar-end mx-0">
                <a class="navbar-item button is-white animated fadeIn"
                   href="https://github.com/djlint/djlint"
                   target="_blank"
                   rel="noopener"
                   aria-label="GitHub">
                    <span class="icon is-large has-text-grey-dark is-nav-icon">
                        <i class="fab fa-2x fa-github"></i>
                    </span>
                </a>
                <a class="navbar-item button is-white animated fadeIn"
                   href="https://discord.gg/taghAqebzU"
                   target="_blank"
                   rel="noopener"
                   aria-label="Discord">
                    <span class="icon is-large has-text-grey-dark  is-nav-icon">
                        <i class="fab fa-2x fa-discord"></i>
                    </span>
                </a>
                <a class="navbar-item button is-white animated fadeIn"
                   href="https://pypi.org/project/djlint/"
                   target="_blank"
                   rel="noopener"
                   aria-label="Download">
                    <span class="icon is-large has-text-grey-dark  is-nav-icon">
                        <i class="fas fa-2x fa-download"></i>
                    </span>
                </a>
                 <div class="navbar-item has-dropdown has-text-grey-dark is-hoverable">
                    <div class="navbar-link has-text-grey-dark is-transparent">
                        <span class="icon is-large">
                            <i class="fas fa-lg  fa-globe"></i>
                        </span>
                        <span>{{ locale | i18n_locale(locales) }}</span>
                    </div>
                    <div class="navbar-dropdown">
                        {%  for page in page.url | i18n_urls(collections.all) %}
                            <a class="navbar-item" href="{{ page.url }}">{{ page.meta.label }}</a>
                        {%  endfor %}
                    </div>
                </div>
            </div>
        </div>
    </div>
</nav>
